<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- Apple Fullscreen -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	
	<!-- Favicon -->
	<link rel="shortcut icon" href="img/favicon.ico" />
	<!-- Icone Homescreen para Apple -->
	<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
	<title>SISTEMA AGENDAMENTO</title>

	<!-- CSS -->	
	<link rel="stylesheet" href="css/bootstrap.css">										<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap-responsive.css">								<!-- Bootstrap responsive -->
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery-ui.css">			<!-- jQuery UI -->
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery.ui.theme.css">		<!-- jQuery UI -->
	<link rel="stylesheet" href="css/plugins/gritter/jquery.gritter.css">					<!-- Notify -->
	<link rel="stylesheet" href="css/plugins/datatable/TableTools.css">						<!-- dataTables -->
	<link rel="stylesheet" href="css/plugins/chosen/chosen.css">							<!-- chosen -->
	
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/themes.css">


	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	
	<!-- Nice Scroll -->
	<script src="js/plugins/nicescroll/jquery.nicescroll.min.js"></script>
	<!-- jQuery UI -->
	<script src="js/plugins/jquery-ui/jquery.ui.core.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.widget.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.mouse.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.resizable.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.sortable.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.datepicker.min.js"></script>
	<script src="js/plugins/jquery-ui/i18n/datepicker-pt-BR.js"></script>
	<!-- slimScroll -->
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<!-- Notify -->
	<script src="js/plugins/gritter/jquery.gritter.min.js"></script>
	
	<!-- Bootstrap -->
	<script src="js/bootstrap.js"></script>
	<!-- dataTables -->
	<script src="js/plugins/datatable/jquery.dataTables.min.js"></script>
	<script src="js/plugins/datatable/jquery.dataTables.columnFilter.js"></script>
	<script src="js/plugins/datatable/jquery.dataTables.grouping.js"></script>
	
	<!-- Plugin: Validation -->
	<script src="js/plugins/validation/jquery.validate.min.js"></script>
	<script src="js/plugins/validation/additional-methods.min.js"></script>
	<!-- Chosen -->
	<script src="js/plugins/chosen/chosen.jquery.min.js"></script>
	<!-- Masked inputs -->
	<script src="js/plugins/maskedinput/jquery.maskedinput.min.js"></script>

	
	<!-- Theme scripts -->
	<script src="js/application.js"></script>

	
	<!--[if lte IE 9]>
		<script src="js/plugins/placeholder/jquery.placeholder.min.js"></script>
		<script>
			$(document).ready(function() {
				$('input, textarea').placeholder();
			});
		</script>
	<![endif]-->
	
</head>


<body class="sidebar-right" data-layout-sidebar="fixed" data-layout-topbar="fixed">
	
	<div id="navigation">
		<div class="container-fluid">
			<a href="index.html" id="brand">AGENDA</a>
			<ul class='main-nav'>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Chamados</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">Listar Requisições</a>
						</li>
						<li>
							<a href="#">Novo Chamado</a>
						</li>
						<li>
							<a href="#">Listar Chamados</a>
						</li>
						<li>
							<a href="#">Buscar Chamado</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Clientes</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="clients-add.html">Novo Cliente</a>
						</li>
						<li>
							<a href="clients-list.html">Listar Clientes</a>
						</li>
						<li>
							<a href="clients-search.html">Buscar Cliente</a>
						</li>
					</ul>
				</li>
				
				<li>
					<a href="#">
						<span>Agenda</span>
					</a>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Servi&ccedil;os</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">Novo Servi&ccedil;o</a>
						</li>
						<li>
							<a href="#">Listar Servi&ccedil;os</a>
						</li>
						<li>
							<a href="#">Buscar Servi&ccedil;o</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Produtos</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="product-add.html">Novo Produto</a>
						</li>
						<li>
							<a href="products-list.html">Listar Produtos</a>
						</li>
						<li>
							<a href="forms-validation.html">Buscar Produto</a>
						</li>
						<li>
							<a href="categorias-add.html">Nova Categoria</a>
						</li>
						<li>
							<a href="categorias-list.html">Listar Categorias</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Configura&ccedil;&otilde;es do Sistema</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="profile-list.php">Perfis de Usu&aacute;rio</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Usu&aacute;rios</a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Novo Usu&aacute;rio</a>
								</li>
								<li>
									<a href="#">Listar Usu&aacute;rios</a>
								</li>
								<li>
									<a href="#">Buscar Usu&aacute;rio</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
			<div class="user">
				<div class="dropdown">
					<a href="#" class='dropdown-toggle' data-toggle="dropdown">Administrador <img src="img/application-images/icon-user.png" alt=""></a>
					<ul class="dropdown-menu pull-right">
						<li>
							<a href="#">Minha Conta</a>
						</li>
						<li>
							<a href="login.html">Sair</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="content">
		<div id="left" class='no-resize'>

			<div class="subnav">
				<div class="subnav-content less">
					<div class="jq-datepicker"></div>
				</div>
			</div>
<!-- 			<div class="subnav"> -->
				
<!-- 				<div class="subnav-title"> -->
<!-- 					<a href="#" class='toggle-subnav'><i class="icon-angle-down"></i><span>Titulo</span></a> -->
<!-- 				</div> -->
<!-- 				<ul class="subnav-menu"> -->
<!-- 					<li class='dropdown'> -->
<!-- 						<a href="#" data-toggle="dropdown">Link 1</a> -->
<!-- 						<ul class="dropdown-menu"> -->
<!-- 							<li> -->
<!-- 								<a href="#">SubLink 1</a> -->
<!-- 							</li> -->
<!-- 							<li> -->
<!-- 								<a href="#">SubLink 2</a> -->
<!-- 							</li> -->
<!-- 						</ul> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 2</a> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 3</a> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 4</a> -->
<!-- 					</li> -->
<!-- 				</ul> -->
<!-- 			</div> -->
		</div>

	<!-- Calendario -->	
	<link rel="stylesheet" type="text/css" href="js/plugins/calendar/jquery.weekcalendar.css" />
	<link rel="stylesheet" type="text/css" href="js/plugins/calendar/skins/default.css" />
	<link rel="stylesheet" type="text/css" href="js/plugins/calendar/skins/gcalendar.css" />
	<script type='text/javascript' src='js/plugins/calendar/libs/jquery-1.4.4.min.js'></script>
	<script type='text/javascript' src='js/plugins/calendar/libs/jquery-ui-1.8.11.custom.min.js'></script>
	<script type='text/javascript' src='js/plugins/calendar/libs/jquery-ui-i18n.js'></script>
	<script type="text/javascript" src="js/plugins/calendar/libs/date.js"></script>
	<script type="text/javascript" src="js/plugins/calendar/jquery.weekcalendar.js"></script>
	
	
	<div id="main">
		<div class="container-fluid">
			<div class="page-header">
				<div class="pull-left">
					<h1>Agenda</h1>
				</div>
			</div>
			<hr />
			<div class="row-fluid">
				<div class="span12">
					<div class="box">
						<div class="box-title">
							<h3>
								<i class="icon-calendar"></i>
								Calendário
							</h3>
							<a href="chamados-add.php" class="btn btn-primary pull-right"><i class="icon-plus"></i> Novo Chamado</a>
						</div>
						<div class="box-content nopadding">
							<div id="calendar"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	<script type="text/javascript">
		var $j = jQuery.noConflict();
	
		(function($) {
			var d = new Date();
	    	d.setDate(d.getDate() - d.getDay());
	    	var year = d.getFullYear();
	    	var month = d.getMonth();
	    	var day = d.getDate();
	
			var eventData1 = {
				options: {
					timeslotsPerHour: 4,
					timeslotHeight: 20,
					defaultFreeBusy: {free: true}
				},
				events : [
			        {'id':1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 30), 'title': 'Lunch with Mike', userId: 0},
			        {'id':2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 45), 'title': 'Dev Meeting', userId: 1},
			        {'id':3, 'start': new Date(year, month, day+1, 18), 'end': new Date(year, month, day+1, 18, 45), 'title': 'Hair cut', userId: 1},
			        {'id':4, 'start': new Date(year, month, day+2, 8), 'end': new Date(year, month, day+2, 9, 30), 'title': 'Team breakfast', userId: 0},
			        {'id':5, 'start': new Date(year, month, day+1, 14), 'end': new Date(year, month, day+1, 15), 'title': 'Product showcase', userId: 1}
				],
				freebusys: []
			};
	
			$(document).ready(function() {

				var $calendar = $('#calendar').weekCalendar({
			        timeslotsPerHour: 4,
			        scrollToHourMillis : 0,
			        timeSeparator: ' as ',
			        //businessHours: {start: 8, ends: 18, limitDisplay: true},
			        height: function($calendar){
						return $(window).height() - ($('.page-header').outerHeight(true) + 130);
					},
					eventRender: function(calEvent, $event) {
						if (calEvent.end.getTime() < new Date().getTime()) {
		            		$event.css('backgroundColor', '#aaa');
		            		$event.find('.wc-time').css({
			              		backgroundColor: '#999',
		              			border:'1px solid #888'
							});
						}
		        	},
			        eventNew: false,
			        data: function(start, end, callback) {
			            callback(eventData1);
			        },
			        users: ['Hugo Hiroshi', 'João', 'Maciel', 'Ana Paula', 'Técnico 01', 'Mais Um Técnico', 'Mais Um Técnico 02'],
			        showAsSeparateUser: true,
			        displayOddEven: true,
			        displayFreeBusys: true,
			        daysToShow: 3,
			        readonly: true,
			        eventClick: function(calEvent, element){
						alert(calEvent.id);
					},
			        switchDisplay: {'1 dia': 1, '3 dias': 3, 'semana': 7},
			        headerSeparator: ' ',
			        useShortDayNames: true,
			        // I18N
			        firstDayOfWeek: $.datepicker.regional['pt-BR'].firstDay,
			        shortDays: $.datepicker.regional['pt-BR'].dayNamesShort,
			        longDays: $.datepicker.regional['pt-BR'].dayNames,
			        shortMonths: $.datepicker.regional['pt-BR'].monthNamesShort,
			        longMonths: $.datepicker.regional['pt-BR'].monthNames,
			        dateFormat: 'd F y'        
				});
			});
		})(jQuery);
	</script>	


	</div>
</body>

</html>

			
			
